import React, { memo, useEffect } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { getHostBannersAction, getTopBannersAction } from "../recommend/store/actionCreator";
import { Carousel } from 'zarm';

export default memo(function Recommend() {

  // redux
  const { hotRecommends, topBanners } = useSelector(
    (state) => ({
      hotRecommends: state.getIn(['recommend', 'hotRecommends']),
      topBanners: state.getIn(['recommend', 'topBanners']),
    }),
    shallowEqual
  )
  const dispatch = useDispatch()

  // other hooks
  useEffect(() => {
    dispatch(getHostBannersAction(35))
    dispatch(getTopBannersAction(2))
  }, [dispatch])


  const contentRender = () => {
    return topBanners.map((item, i) => {
      return (
        <div className="carousel__item__pic" style={{ height: "150px" }} key={+i}>
          <img src={item.pic} alt="" draggable={false} style={{
            width: "100%",
            height: "auto"
          }} />
        </div>
      );
    })
  };


  return (
    <div>
      <div>
        <Carousel
          autoPlay
          loop
          showPagination={false}
        >
          {contentRender()}
        </Carousel>
      </div>
      {hotRecommends &&
        hotRecommends.map((item) => {
          return (
            <div key={item.id}>
              {item.name}
            </div>
          )
        })}
    </div>
  )
})
